
$('.tou').load('head.html')
$('.wei').load('footer.html')
function que(name) {
    var search = location.search.replace('?', '');
    search = search.split('&')
    search = search.map((value) =>
        ({
            key: value.split('=')[0],
            value: value.split('=')[1]
        }))
    var data = search.filter(({ key }) => key === name)[0]
    return data ? data.value : ''
}
var id = que('id')
console.log(id);

$.ajax({
    type: "POST",
    url: "http://localhost/lian/pubg/php/xian.php",
    data: { id },
    success: function (data) {
        var dd = JSON.parse(data)
        console.log(dd);
        console.log(dd.data[0].id);

        var html = ` <div id="blk_detail_main" style="margin-left: 150px;">
<!-- 商品展示 -->
<div class="product-intro clearfix">
    <!-- 细节图展示 -->
    <div class="fl product-preview">
        <div class="good-imgs">
            <ul>
                <li class="picshow">
                    <!-- 暂缺货 -->
                    <!-- 已下架 -->
                    <a class="product-image image-zoom MagicZoom" rel="loading-msg:Loading zoom..."
                        id="main-image" title=""
                        style="display: inline-block; position: relative; text-decoration: none; outline: 0px; overflow: hidden;">
                        <img
                            id="big_pic"
                            src="${dd.data[0].img}""
                            width="570" height="570" class="jqzoom" alt="">
                            <div id='mark'></div>
                            </a>
                                

                </li>
            </ul>
        </div>
        <div id='big' style = "display: none;
                        position: absolute;
                        top: 200px;
                        left: 650px;
                        width: 300px;
                        height: 300px;
                        overflow: hidden;">
                                <img style =" position: absolute;width:600px"  src="${dd.data[0].img}" alt="">
                                </div>
        <div class="picdetails" id="js-more-views">
            <ul class="picdetail-list">
                <li class=" active">
                    <a data-seq="0" id="main-image-0"
                        href="${dd.data[0].img}"
                        rev="${dd.data[0].img}"
                        rel="zoom-id:main-image;" title="">
                        <img src="${dd.data[0].img}"
                            width="74" height="70" alt="商品图">
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 商品信息 -->
    <div class="fl product-info">
        <h3 class="pord-name">${dd.data[0].name}</h3>
        <div class="pord-tips">以最早登陆steam的先驱玩家为原型，“老兵不腐，再战沙场”对经典形象进行演绎，回馈中国玩家！</div>
        <div class="pord-price clearfix" style="height:auto;">
            <!-- 预定商品价格展示 -->
            <span class="fl pord-dispri">￥<strong>${dd.data[0].price}.00</strong></span>
            <span class="fl pord-orpri">￥599.00</span>
            <a href="javascript:;" style="display: none" data-id="683" mallid="8128" icatid="817"
                ivippromoteprice="0" class="fr coupon-link" title="领取优惠券">领取优惠券<i
                    class="ico-detail ico-lqarr"></i></a>
        </div>
        <div class="pord-detailbox clearfix">
            <div class="fl pord-sold">已售：<span>52</span></div>
            <div class="fl pord-totalcom">累计评价：<span class="commentNum">0</span></div>
            <div class="fr pord-starbox">
                <i class="ico-detail i-star0"></i>
                <span>0.0</span>
            </div>
        </div>

        <!-- -->
        <div id="blk_detail_main_spec">
            <div class="mt10 pord-color pord-sellist clearfix">
                <label class="fl">礼盒分类</label>
                <ul class="fl ml28">
                    <li attrid="464" class=" current " style="overflow:hidden;">
                        <div class="pord-selbox">典藏礼盒标准版</div>
                    </li>
                </ul>
            </div>
        </div>
        <div id="blk_detail_main_btn">
            <div class="mt10 pord-num clearfix">
                <label class="fl pt10">数量</label>
                <div class="fl ml42">
                    <a href="javascript:;" class="fl num-plus numbtn num-plus btn_detail_main_buy_min"><i
                            class="ico-detail">-</i></a>
                    <input type="text" size="2" maxlength="3" stock_num="67" limit_num="0"
                        class="fl nummidbtn num inpt_detail_main_buy_num" value="1">
                    <a href="javascript:;" class="fl numbtn num-minus btn_detail_main_buy_plus"><i
                            class="ico-detail">+</i></a>
                </div>
                <span class="pord-stock">(还剩67件)</span>
            </div>
            <div class="pord-btn clearfix">

                <a id="btn_detail_cart_add" href="javascript:;" class="fl joincart-btn">加入购物车</a>
                <a id="btn_detail_cart_buy" href="javascript:;" class="fl ml30 buy-btn">立即购买</a>
                <a href="javascript:;" class="fl btn-collect">
                    <i class="ico-detail ico-collect"></i>
                    <span>收藏</span>
                </a>
                <a href="javascript:;" class="fl btn-collected" style="display: none">
                    <i class="ico-detail ico-collect"></i>
                    <span>已收藏</span>
                </a>
            </div>
        </div>
    </div>
</div>
</div>${dd.data[0].detail}`
        $('.dui').html(html)
        $('#btn_detail_cart_add').on('click', function () {
            var username = getCookie("login_user");
            if (!username) {
                layui.use(['layer', 'form'], function () {
                    layer.alert('先登录啦，')
                });


            } else {
                var id1 = dd.data[0].id
                var name1 = dd.data[0].name
                var obj = {
                    name1: username,
                    uid: name1,
                    gid: id1,
                    img: dd.data[0].img,
                    price: dd.data[0].price,
                    count: 1
                }
                tian(obj)

                location.href = `./gwc.html`
            }

        })
        yu1()




    }

})
//添加商品
function tian(obj) {
    $.ajax({
        type: "POST",
        url: "http://localhost/lian/pubg/php/gwc.php",
        data: obj,
        success: function (data) {

        }

    })
}
//放大镜

function yu1() {
    $("#big_pic").mouseenter(function () {
        $("#mark,#big").show();
        console.log(22);

    }).mouseleave(function () {
        console.log(333);

        $("#mark,#big").hide();
    }).mousemove(function (ev) {
        console.log(11);

        var l = ev.pageX - $("#big_pic").offset().left - 100;
        var t = ev.pageY - $("#big_pic").offset().top - 100;
        //做一个简单的限制出界
        l = range(l, 0, 122);
        t = range(t, 0, 280);

        $("#mark").css({
            left: l,
            top: t
        });
        //大图片，按照对应倍数的反方向移动
        $("#big img").css({
            left: -2 * l,
            top: -2 * t
        })
    })
}

function range(iCur, iMin, iMax) {
    if (iCur < iMin) {
        return iMin;
    } else if (iCur > iMax) {
        return iMax;
    } else {
        return iCur;
    }
}


